<template>
    <div class="line-chart" id="line-chart" style="width:100%px;height:300px"></div>
</template>
<script>
export default {
  mounted () {
    this.init()
  },
  methods: {
    init () {
      const chart = this.$echarts.init(document.getElementById('line-chart'));
      const color = [
        'rgb(155, 139, 186)',
        'rgb(224, 152, 199)',
        'rgb(143, 211, 232)'
      ];
      const option = {
        title: {
          text: '订单量、营业额、利润率的变化态势',
          left: '0',
          top: '10',
          textStyle: {
            color: 'rgb(85, 85, 85)',
            fontSize: 14,
            fontWeight: 400
          }
        },
        color: color,
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['价格', '数量', '利润'],
          x: 'center', // 可设定图例在左、右、居中
          y: 'bottom'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2022-01-01', '2022-01-15', '2022-01-30', '2022-02-01', '2022-02-15', '2022-02-30', '2022-03-01', '2022-03-15', '2022-03-30']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '价格',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210, 100, 100]
          },
          {
            name: '数量',
            type: 'line',
            stack: '总量',
            data: [98, 182, 181, 110, 90, 120, 100, 98, 130]
          },
          {
            name: '利润',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410, 680, 452]
          }
        ]
      };
      chart.setOption(option);
    }

  }
}
</script>